<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8">
        <title>DIY切换衣服图案</title>
        <link rel="stylesheet" href="style.css">
        <script src="jquery-3.6.0.min.js"></script>
    </head>
    <body>
        <div class="container">
            外容器
            <div class="shirt">
                T恤容器
                <div class="shirt-overlay">
                    花纹遮罩
                </div>
            </div>
            <div class="options">
                <div class="option active">1</div>
                <div class="option" style="background-image: url(./images/1.png);">2</div>
                <div class="option" style="background-image: url(./images/2.png);">3</div>
                <div class="option" style="background-image: url(./images/3.png);">4</div>
            </div>
        </div>
        <script>
            // 图案选项点击事件
            $(".option").on("click",function(){
                // 全部选项移除active样式
                $(".option").removeClass("active");
                // 为当前项添加active样式
                $(this).addClass("active");
                // 获取当前项下的图片地址
                let pattern=$(this).css("backgroundImage");
                $(".shirt-overlay").css("background-image",pattern);
            })
        </script>
    </body>
</html>